<template>
  <div>
    <h2>添加</h2>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>房型名称</td>
          <td>
            <input type="text" v-model="form.name" />
          </td>
        </tr>
        <tr>
          <td>单价</td>
          <td>
            <input type="text" v-model="form.price" />
          </td>
        </tr>
        <tr>
          <td>室内面积</td>
          <td>
            <input type="text" v-model="form.mianji" />
          </td>
        </tr>
        <tr>
          <td>最多入住人数</td>
          <td>
            <input type="text" v-model="form.renshu" />
          </td>
        </tr>
        <tr>
          <td>图片</td>
          <td>
            <img :src="form.tupian" style="display: ''; max-width: 100px" />
            <input type="file" style="display: ''" id="file" @change="Tupian" />
          </td>
        </tr>
        <tr>
          <td>描述</td>
          <td>
            <textarea v-model="form.miaoshu"></textarea>
          </td>
        </tr>
        <tr>
          <td>是否有窗</td>
          <td>
            <input
              type="radio"
              v-model="form.youchuang"
              name="youchuang"
              checked
            />有窗
            <input
              type="radio"
              v-model="form.youchuang"
              name="youchuang"
              
            />没窗
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button @click="Add">添加</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import "bootstrap/dist/css/bootstrap.min.css";

const router = useRouter();
const form = reactive({
  id: 0,
  name: "",
  price: "",
  mianji: "",
  renshu: "",
  tupian: "",
  miaoshu: "",
  youchuang: "",
});

const Add=()=>{
    if(!form.name){
        alert("名称不能为空");
        return;
    }
    if(!form.price){
        alert("单价不能为空");
        return;
    }

    axios.post("https://localhost:7088/api/fangxing/fangAdd",form).then(res=>{
        if(res.data>0){
            alert("添加成功");
            router.push("showfang")
        }
        else
        {
            alert("添加失败");
        }
    })

}

const Tupian=(e:any)=>{
    var formdata=new FormData();
    var file=e.target.files[0];
    formdata.append("file",file);
    axios.post("https://localhost:7088/api/fangxing",formdata).then(res=>{
        form.tupian=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}



</script>

<style scoped></style>
